<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--
<@ page %>
这是JSP指令,用于设置JSP页面的一些全局属性或配置。
contentType="text/html; charset=UTF-8"
这个属性设置了响应内容的类型和字符编码.
这个设置告诉浏览器如何解码页面内容
pageEncoding="UTF-8"
该属性设置了JSP文件的编码
--%>
<%--
<%@ include %>
这是一个静态包含指令。
文件的内容会在当前页面编译时被替换进来。
file="/WEB-INF/jsp/common/head.jsp":路径是相对路径。
--%>
<%@include file="/WEB-INF/jsp/common/head.jsp"%>
<%--
<div>
<分区>
<div>是HTML中的一个容器元素,它没有特定的语义,仅用于将网页中的其他元素组织在一起
例如,你可以用<div>来包裹整个网页的布局区域，单个模块，或者某个部分
class="content"
班="所容纳之物"
是一个常见的布局容器，通常用于包裹网页中的主要内容区域。
这个content类在不同的项目中,可能会定义特定的样式，比如内边距(padding),背景样色，边框样式等
在页面布局中,content类用于区分主要的内容区域与其他区域(如头部，侧边栏或底部)
--%>
<div class="content">
    <%--
    class="container-fluid"
    班="所容纳之物-液体"
    container-fluid是Bootstrap中的一个类，它用于创建一个宽度自适应的容器，能够占据页面的100%宽度。
    这个类确保页面内容能够根据浏览器视口的大小自动调整宽带，适用于响应式布局
    它会填充整个浏览器窗口的宽度
    --%>
    <div class="container-fluid">
        <%--
        <nav>
        <导航>
        定义网页中的导航部分
        class="pull-left":是Bootstrap中的一个CSS类，用于将元素左侧对齐
        --%>
        <nav class="pull-left">
            <%--strong:加粗--%>
            <%--&nbsp:不会造成简单空格的换行--%>
            <%--span包装文本的--%>
            <strong>你现在所在的位置是:</strong>&nbsp;&nbsp;&nbsp;<span>供应商页面</span>
            <%--换行--%>
            <br>
        </nav>
    </div>
    <div class="container-fluid">
        <%--
        row
        一行
        row是用来包装一行的容器,保证元素的横向排列
        在Bootstrap中,row是网格系统的一个关键部分,用于创建水平布局的行。
        作用:
        1.创建水平排列的列:
        row类将子元素(如col-*)按行排列，使它们在水平方向上对齐。
        2.保证列之间有间距:
        Bootstrap会确保列之间有足够的间距(即边距和填充),让它们不会紧挨在一起，通常有gutter(排水沟)的效果。
        3.响应式布局:
        通过在row内添加不同的col-*类，页面的布局可以根据设备宽带自动调整
        常见使用场景:
        表单布局:
        每个表单字段(input,select等)都可以放在一个col-*类中，且被包含在row内部
        卡片布局:
        将卡片或其他组件横向排列，使用row包裹多个col-*类来实现响应式网格布局。
        容器布局:
        通过row来定义页面的主要内容区域和列结构
        --%>
        <div class="row">
            <%--
            col-md-12
            列-中等屏幕-12等分
            是Bootstrap网格系统中的一个列(column)元素,它表示在中等屏幕(md)及以上的设备上，这个列占满整个行的12等分中的所有12等分,意味着它会横向占满整行
            应用场景:
            单个大内容区块:
            响应式设计:
            --%>
            <%--
            row,col-md-12
            row是容器，它定义了布局的上下文
            col-md-12定义了列的占位,是列类
            --%>
            <div class="col-md-12">
                <%--
                card
                卡片
                card是Bootstrap中用于创建卡片式布局的容器组件，可以包含多个内容区块(如标题,正文,底部等),并且非常灵活，适用于各种场景。
                --%>
                <div class="card">
                    <%--card下使用content是为了组织和布局卡片内部的内容--%>
                    <div class="content">
                        <%--
                        form
                        表单
                        <form>标签用于创建一个HTML表单，它允许用户输入数据并将数据提供给服务器进行处理。
                        表单可以包含文本框，按钮，复选框，单选框等不同类型的输入字段
                        class="form-inline"
                        班="表单-内联"
                        form-inline类只影响表单控件，从块级变成行内。
                        块级元素(例如<div>)会在页面上占满一整行,因此每个表单控件会在新的一行上显示。
                        行内元素(例如<span>)则会沿着一行排列，尽可能地紧凑
                        form-inline类将表单的元素设置为行内显示，让它们水平排列，而不是锤子堆叠。
                        这对于需要在同一行显示多个输入框和按钮时非常有用
                        method="post"
                        method="post"属性指定了表单提交数据时所使用的HTTP方法。
                        常见的表单提交方法有两种:GET和POST
                        POST:
                        通过HTTP POST方法提交表单数据。
                        POST方法会将数据嵌入到请求的正文部分,不会显示在URL中，因此适用于提交较大或敏感的数据，比如用户名，密码或文件上传。
                        GET:
                        通过HTTP GET方法提交表单数据。
                        GET方法会将数据附加在URL后面(作为查询参数),这适用于不包含敏感信息的数据提交，但由于数据暴露在URL中,提交的数据量也有限制。
                        POST方法通常用于表单包含较大数据或者是涉及到敏感信息时，比如登录表单，注册表单等。
                        action="${pageContext.request.contextPath}/sys/provider/list.html"
                        行动="${页面上下文.要求.上下文路径}/系统/提供者/列表.网页
                        是在表单中定义提交请求
                        action
                        action属性指定了表单数据提交的目标URL,即当用户提交表单时,数据会被发送到该URL.
                        ${pageContext.request.contextPath}
                        是JSP(Java Server Pages)中用于获取当前应用的上下文路径
                        上下文路径(Context Path):
                        它指的是web应用部署在服务器上的路径。
                        例如,如果你的应用在服务器的http://localhost:8080/untitled20_war_exploded/路径下部署,那么${pageContext.request.contextPath}会返回/myapp
                        使用contextPath是为了确保在不同的部署环境中,应用的路径是动态获取的。
                        这样，无论你的应用部署在哪个服务器或者路径下，contextPath都能确保URL路径的正确性。
                        sys/provider/list.html
                        这是表单提交的具体URL路径。
                        它表示在Web应用中的某个地址或资源(比如控制器）会处理提交的请求。
                        在这里，它指向的是/sys/provider/list.html是哟个Spring Controller.
                        当前应用上下文路径+路径
                        为什么这样做:动态构建URL
                        --%>
                        <form class="form-inline" method="post" action="${pageContext.request.contextPath}/sys/provider/list.html" accept-charset="UTF-8">
                            <div class="row">
                                <div class="col-md-4">
                                    <%--
                                    form-group(表单-组)
                                    它的作用是将控件和它们的标签(如<label>)组织在一起。
                                    --%>
                                    <div class="form-group">
                                        <%-- <label>(标签)用于为表单元素提供描述性文本，增加表单的可访问性和用户友好性--%>
                                        <label>供应商编码:</label>
                                        <%--
                                        <input>
                                        输入
                                        type="text"
                                        类型="文本"
                                        name="proCode"
                                        名称="供应商编码
                                        会当作键
                                        value="${proCode}"
                                        输入框默认值,在后端注解中设置了""
                                        class="form-control border-input"
                                        班="表单-控制 边界-输入"
                                        Bootstrap的输入框样式，自定义输入框样式
                                        --%>
                                        <input name="proCode" value="${proCode}" class="form-control border-input">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>供应商名称:</label>
                                        <input name="proName" value="${proName}" class="form-control border-input">
                                    </div>
                                </div>
                                <%--rollpage.js
                                page_nav需要
                                分页的
                                --%>
                                <input type="hidden" name="pageIndex" value="1">
                                <div class="col-md-2">
                                    <%--text-center(文本-中心)Bootstrap将文本内容或其他内联元素水平居中--%>
                                    <div class="text-center">
                                    <%--
                                    button(按钮)
                                    type="submit"提交表单
                                    btn基本按钮样式
                                    btn-primary主色调
                                    btn-fill自定义填充
                                    btn-wd自定义宽度
                                    --%>
                                        <button type="submit" class="btn btn-primary btn-fill btn-wd">搜索</button>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <%--
                                     <a href="${pageContext.request.contextPath}" class="btn btn-danger btn-fill btn-wd">添加供应商</a>
                                     是一个超链接，但看起来像按钮,使用样式让链接显示成按钮外观
                                        <a>
                                        标签用于创建一个超链接
                                        它指向了href="${pageContext.request.contextPath}/sys/provider/add.html"
                                        btn-danger红色背景,表示危险
                                    --%>
                                    <a href="${pageContext.request.contextPath}/sys/provider/add.html" class="btn btn-danger btn-fill btn-wd">添加供应商</a>
                                </div>
                                <%--clearfix清除浮动,确保row容器自动扩展--%>
                                <div class="clearfix"></div>
                            </div>
                        </form>
                    </div>
                    <%--
                    content区域
                    table-responsive(反应敏捷的)
                    为包含的表格加上overflow-x:auto,使得表格超出容器宽度,可以滚动查看
                    table-full-width表格宽度占满父容器(自定义)
                    --%>
                    <div class="content table-responsive table-full-width">
                        <%--table-striped加入条纹样式--%>
                        <table class="table table-striped">
                            <%--
                                thead
                                表头
                                用来包裹表格中的列
                                包含<tr>
                            --%>
                            <thead>
                                <tr>
                                    <th width="10%">供应商编码</th>
                                    <th width="10%">供应商名称</th>
                                    <th width="10%">联系人</th>
                                    <th width="12%">联系电话</th>
                                    <th width="15%">传真</th>
                                    <th width="10">创建时间</th>
                                    <th width="25%">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <%--
                                <c:forEach>
                                这个标签用于迭代一个集合(如数组,List或Set),对集合中的每一项执行一次循环。
                                这个标签常常用于显示动态生成的内容(如从数据库中查询出来的数据)
                                var="provider"
                                这是一个属性，用于指定循环过程中每一项的变量名称。
                                这里的provider就是集合pi.list中的每一项代表对象。
                                在循环体内，可以用${provider}访问当前循环
                                items=${pi.list}:
                                这是集合的来源，表示你要迭代的数据集合。
                                items属性指定了你要遍历的对象。
                                在这个例子中,${pi.list}是从请求(Request)或其他作业域中取得的一个集合对象,比如一个List或Array.
                                varStatus="status":varStatus是一个可选属性，用来获取迭代过程中的状态信息类
                                --%>
                                <c:forEach var="provider" items="${pi.list}" varStatus="status">
                                    <%--
                                    <tr>表示一个表格行，通常用于将<td>或<th>元素组合在一起。
                                    th可以省略这层，浏览器会自动加上，td不行.
                                    <td>表示表格中的数据单元格(table date cell),它包裹的是表格的普通数据
                                    <th>表示表格中的表头单元格(table header cell),通常用于表示列的标题或说明.它的内容默认会加粗并居中
                                    --%>
                                    <tr>
                                        <td>${provider.proCode}</td>
                                        <td>${provider.proName}</td>
                                        <td>${provider.proContact}</td>
                                        <td>${provider.proPhone}</td>
                                        <td>${provider.proFax}</td>
                                        <td>
                                                <%--
                                                fmt:formatDate
                                                fmt(Formatting标签库)
                                                pattern模式
                                                --%>
                                            <fmt:formatDate value="${provider.creationDate}" pattern="yyyy-MM-dd"/>
                                        </td>
                                        <td>
                                                <%--
                                                href="javascript:;":使用javascript:;作为链接地址，表示点击后不会跳到其他页面,而是触发JavaScript代码
                                                btn-info,btn-warning,btn-success按钮的颜色，信息(蓝色),警告(黄色)和成功绿色
                                                btn-xs:按钮是小号
                                                proid="${provider.id}" proname="${provider.proName}"
                                                这是EL表达式，用来动态获取每个供应商的id和proName,并将它们作为自定义属性(proid和proname)存储在每个连接中。
                                                这些值可能在JavaScript中用来执行进一步的操作，比如删除，修改或查看供应商的详细信息。
                                                --%>
                                            <a class="viewProvider btn btn-info btn-xs" href="javascript:;" proid="${provider.id}" proname="${provider.proName}" >查看</a>
                                            <a class="modifyProvider btn btn-warning btn-xs" href="javascript:;" proid="${provider.id}" proname="${provider.proName}">修改</a>
                                                    <%--proname是删除成功或失败时的提示信息,不需要再回传给后端的删除控制器了--%>
                                            <a class="deleteProvider btn btn-success btn-xs" href="javascript:;" proid="${provider.id}" proname="${provider.proName}">删除</a>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
                <%--
                <c:import>标签
                功能:该标签用于在JSP页面中动态引入另一个资源(如JSP页面,HTML文件或其他内容)
                url属性指定要导入的页面路径，可以是一个相对路径，也可以是一个绝对路
                --%>
                <c:import url="rollpage.jsp">
                    <%--
                    <c:param>标签用于向被导入的页面传递参数。
                    --%>
                    <c:param name="pi" value="${pi}"/>
                </c:import>
            </div>
        </div>
    </div>
</div>
<%@include file="/WEB-INF/jsp/common/foot.jsp"%>
<script type="text/javascript">
    $(".sidebar-wrapper .nav li:eq(4)").addClass("active");
</script>
<script type="text/javascript"
        src="${pageContext.request.contextPath }/statics/js/providerlist.js"></script>